<template>

  <div class="main_top">
    <div class="main_title">
      <div class="main_img">
        <img src="../../assets/90dd28acbd918aff7c3053f3b958c434.png">

      </div>
      <div class="main_text">天眼外观自动检测系统</div>
    </div>
    <div class="main_right">
      <div class="main_control">
        <div class="control_item" @click="sets(1)">
          <img src="../../assets/ic_common_close.png">
        </div>
        <div class="control_item" @click="sets(2)">
          <img src="../../assets/ic_common_expand.png">
        </div>
        <div class="control_item"  @click="sets(3)">
          <img src="../../assets/ic_common_narrow.png" style="height: 2px">
        </div>
        <div class="control_item" @click="sets(4)"  v-if="userInfoStore.userType!=1">
          <img src="../../assets/ic_common_setting.png" style="width: 16px;height: 16px;">
        </div>
      </div>
      <div class="main_user">
        <div class="user_img">
          <img src="../../assets/ic_common_avatar.png">
        </div>
        <div class="user_text" v-if="userInfoStore.userName">欢迎： {{userInfoStore.userName}}</div>
        <div class="user_text" v-else>未登录</div>
      </div>
      <!-- <div class="main_status">
        <div class="status_content">
          <div class="status_color"></div>
          <div class="status_text">设备正常运行</div>
        </div>
      </div> -->
    </div>
  </div>

</template>

<script>
  import qwebchannel from '../../qt5.15webchannel';
  import { mapState } from 'vuex';
	export default {
		name: 'BoneDen',
    computed: {
    ...mapState(['userStoreLimits','userInfoStore']),
    },
		data() {
			return {
        // qtCall:null
				// msg: 'Welcome to Your Vue.js App2222',


			}
		},
    created() {


    },
		mounted() {

      console.log('初始化-top1')
      // new qwebchannel.QWebChannel(qt.webChannelTransport, (channel) => {
      //             console.log('初始化-top')
      //               this.qtCall = channel.objects.webBridge;
      //               this.qtCall.QtToJs.connect((func, json) => {
      //                 console.log('初始化-top-connect')

      //               })

      //             });

		},
		methods: {
      sets(index){
          if (process.env.NODE_ENV !== 'production') {
            return
          }
          // let that = this
          if(index==1){
            this.$confirm('是否关闭该软件?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              const data = {
                type:6,
              }
              this.$qtCall.JsToQt("NeedOperate", data);//可以传给qt
            });
          }else if(index==2){
            const data = {
                type:7,
            }
            this.$qtCall.JsToQt("NeedOperate", data);//可以传给qt
          }
          else if(index==3){ //最小化
            const data = {
                type:8,
            }
            this.$qtCall.JsToQt("NeedOperate", data);//可以传给qt
          }
          else if(index==4){
            const data = {
                type:9,
            }
            this.$qtCall.JsToQt("NeedOperate", data);//可以传给qt
          }
          /* new qwebchannel.QWebChannel(qt.webChannelTransport, (channel) => {
            that.qtCalls = channel.objects.webBridge;
            switch (index) {
            case 1:

            const data1 = {
                type:6,
            }
            that.qtCalls.JsToQt("NeedOperate", data1);//可以传给qt
            localStorage.setItem('lastDate','')
            break;
            case 2:
            const data2 = {
                type:7,
            }
            that.qtCalls.JsToQt("NeedOperate", data2);//可以传给qt
            break;
            case 3:
            const data3 = {
                type:8,
            }
            that.qtCalls.JsToQt("NeedOperate", data3);//可以传给qt
            break;
            case 4:
            const data4 = {
                type:9,
            }
            that.qtCalls.JsToQt("NeedOperate", data4);//可以传给qt
            break;
            default:
              // 如果 expression 不匹配任何 case 值，则执行 default 子句中的代码块
              break;
          }
          }); */



      }

		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.main_top{
  display: flex;
  height: 45px;
  background: #ECEEF1;
  flex: 1;
  .main_title{
  display: flex;
  flex:1;
  align-items: center;
    .main_img{
      height: 100%;
      width: 94px;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      margin-left: 15px;
        img{
      width: 100%;
      width: 100%;
    }
    }
        .main_text{
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      font-size: 20px;
      color: #08479F;
      line-height: 45px;
      margin-left: 15px

    }
  }
    .main_right{
      display: flex;
      flex-direction: row-reverse;
      flex: 1;
      .main_control{
        display: flex;
        flex-direction: row-reverse;
        .control_item{
          width: 40px;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          img{
            width: 12px;
            height: 12px;
          }
        }
      }
      .main_user{
        width: 220px;
        display: flex;
        .user_img{
          width: 50px;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          img{
            width: 26px;
            height: 26px;
          }
        }
        .user_text{
          font-family: PingFangSC, PingFang SC;
          font-weight: 600;
          font-size: 14px;
          color: #2A2A2A;
          line-height: 48px;

        }
      }
      .main_status{
        width: 220px;
        display: flex;
        justify-content: center;
        align-items: center;
        .status_content{
          width: 136px;
          height: 26px;
          background-color: #fff;
          border-radius: 2px;
          display: flex;
          justify-content: center;
          align-items: center;
          .status_color{
            width: 14px;
            height: 14px;
            border-radius: 14px;
            background-color: #116DEE;
          }
          .status_text{
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            font-size: 12px;
            color: #2A2A2A;
            padding-left: 8px;
          }
        }
      }
    }
}





</style>
